<!-- 管理员:课程考核管理:题库和在线考试管理:试题库管理:简答题 -->
<template>
  <div style="width:100% !important;padding:0 2vh;"
       id="id_container_ShortEssay">
    <el-container>
      <el-main>
        <el-form>
          <el-form-item label="课程编码"
                        style="color: #004ca7 ;">
            {{ kcbm?kcbm:"空"}}
          </el-form-item>
          <el-form-item label="试题题干">
            <el-input type="textarea"
                      v-model="dxdata.sttg"></el-input>
          </el-form-item>
          <el-form-item label="参考答案">
            <el-input type="textarea"
                      v-model="dxdata.zqda"></el-input>
          </el-form-item>
          <el-form-item label="关键字"></el-form-item>
          <el-form-item>
            <div v-for="(item) in dxdata.daxx"
                 :key="item.name">
              <el-row><label style="display:block;">（{{item.name}}）</label></el-row>
              <el-row>
                <el-col :span=22>
                  <el-input v-model="item.content"></el-input>
                </el-col>
                <el-col :span=2
                        style="text-align:center;">
                  <!-- <el-button type="danger"
                             size="mini"
                             icon="el-icon-delete"
                             @click="xxdele(index)"
                             circle></el-button> -->
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-button @click="add"
                         size="mini"
                         type="warning"
                         icon="el-icon-circle-plus-outline"
                         style="width:100px;">添加关键字</el-button>
            </el-row>
          </el-form-item>
          <el-form-item label="可获得分数"><br />
            <div v-for="(item) in dxdata.khdfs"
                 :key="item.name">
              <el-row><label style="display:block;">（{{item.name}}）</label></el-row>
              <el-row>
                <el-col :span=22>
                  <el-input v-model="item.fs"></el-input>
                </el-col>
                <el-col :span=2
                        style="text-align:center;">
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item label="题目解析">
            <el-input type="textarea"
                      v-model="dxdata.tmjx"></el-input>
          </el-form-item>
          <el-form-item label="试题章节">
            <el-row></el-row>
            <el-row>
              <el-col :span=20>
                <el-input v-model="questionModel.capter"></el-input>
              </el-col>
              <el-col :span=4
                      style="text-align:center;">
                <el-button @click="onBtnChoiceCapterClickHandler"
                           type="success">选择章节</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="试题难度"> <br />
            <el-radio-group v-model="dxdata.stndz">
              <el-radio label="简单"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">简单</el-radio>
              <el-radio label="一般"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">一般</el-radio>
              <el-radio label="难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">难</el-radio>
              <el-radio label="很难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">很难</el-radio>
              <el-radio label="较难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">较难</el-radio>
              <el-radio label="非常难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">非常难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="适用培养层次">
            <el-input v-model="dxdata.pyccvalue"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <chapter-dialog :dialogVisible.sync="choiceCapterDialogVisible"
                    @save="onChoiceDialogSaveHandler"
                    @cancel="onChoiceDialogCancelHandler" />
  </div>
</template>
<script>
import ChapterDialog from './chapterDialog'
import { Message } from 'element-ui'
export default {
  components: {
    'chapter-dialog': ChapterDialog,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    kcbm: {
      type: String,
    },
    kcmc: {
      type: String,
    },
    Textshow: {},
    wipedata: {},
  },

  data() {
    return {
      dxdata: {
        daxx: [
          { name: '关键字1', content: '' },
          { name: '关键字2', content: '' },
        ],
        zqda: '',
        khdfs: [
          { name: '关键字1', content: '' },
          { name: '关键字2', content: '' },
        ],
        tmjx: '',
        stndz: '',
        pyccvalue: '',
      },
      testdaxx: [
        { name: '关键字1', content: '' },
        { name: '关键字2', content: '' },
        { name: '关键字3', content: '' },
        { name: '关键字4', content: '' },
        { name: '关键字5', content: '' },
        { name: '关键字6', content: '' },
        { name: '关键字7', content: '' },
      ],
      additem: [],
      rightKey: 2,
      rightKeyGroup: [],
      choiceCapterDialogVisible: false,
      questionModel: {
        capter: '',
      },
    }
  },
  methods: {
    add() {
      this.testdaxx[this.dxdata.daxx.length]
        ? this.dxdata.daxx.push(this.testdaxx[this.dxdata.daxx.length])
        : Message({ message: '超出选项上限', type: 'success' })
      this.testdaxx[this.dxdata.khdfs.length]
        ? this.dxdata.khdfs.push(this.testdaxx[this.dxdata.khdfs.length])
        : Message({ message: '超出选项上限', type: 'success' })
    },
    onBtnChoiceCapterClickHandler: function () {
      this.choiceCapterDialogVisible = true
    },
    onChoiceDialogCancelHandler: function () {
      this.choiceCapterDialogVisible = false
    },
    onChoiceDialogSaveHandler: function (pVal) {
      Message({
        message: 'ChoicedCapter=' + pVal.label,
        type: 'error',
      })
      this.choiceCapterDialogVisible = false
      this.questionModel.capter = pVal.label
    },
    setDisplay: function () {
      if (this.visible) {
        document.getElementById('id_container_ShortEssay').style.display =
          'block'
      } else {
        document.getElementById('id_container_ShortEssay').style.display =
          'none'
      }
    },
  },
  watch: {
    visible: {
      handler: function (p_val, p_oldval) {
        this.setDisplay()
      },
      deep: true,
    },
    async Textshow() {
      let arr = []
      await this.dxdata.daxx.forEach((item) => {
        item = item.name + ':' + item.content
        arr.push(item)
      })
      let arr2 = []
      await this.dxdata.khdfs.forEach((item) => {
        item = item.name + ':' + item.fs
        arr2.push(item)
      })
      this.dxdata.khdfs = arr2.join('*-*-*')
      this.dxdata.daxx = arr.join('*-*-*')
      this.$emit('dxtdata', this.dxdata)
    },
  },
  mounted: function () {
    this.setDisplay()
  },
}
</script>

<style lang="less" scoped>
</style>

<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
</style>
